<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nginx-kafka日志收集</title>
</head>
<body>
    <div id="app">
        <div v-for="(position, index) in positions" style="float: left; width: 20%; height: 200px; border: dimgrey 1px solid; border-radius: 16px; margin: 16px; padding: 16px">
            <div style="margin-bottom: 4px">
                <div>
                    <span>{{position.position}}</span>&nbsp;
                    <span>{{position.publishTime}}</span>&nbsp;
                    <span>{{position.salary}}</span>
                </div>
                <div>经验 {{position.experience}}</div>
                <div style="margin-bottom: 4px" v-for="tag in position.tags">
                    <span style="border: dimgrey 1px solid;  margin-right:4px; border-radius: 2px">{{tag}}</span>&nbsp;
                </div>
                <br/>
                <hr style="border: dimgrey 1px dotted"/>
                <div style="margin-bottom: 4px">{{position.company}}</div>
                <div style="margin-bottom: 4px">{{position.description}}</div>
                <button v-on:click="sendLog('click', index)">点击</button>
                <button v-on:click="sendLog('job_collect', index)">收藏</button>
                <button v-on:click="sendLog('cv_upload', index)">上传简历</button>
                <button v-on:click="sendLog('cv_send', index)">投简历</button>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    let positions = [
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"1","tags":["互联网","游戏"],"company":"公司1","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"2","tags":["互联网","游戏"],"company":"公司2","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"3","tags":["互联网","游戏"],"company":"公司3","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"4","tags":["互联网","游戏"],"company":"公司4","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"5","tags":["互联网","游戏"],"company":"公司5","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"6","tags":["互联网","游戏"],"company":"公司6","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"7","tags":["互联网","游戏"],"company":"公司7","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"8","tags":["互联网","游戏"],"company":"公司8","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"9","tags":["互联网","游戏"],"company":"公司9","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"10","tags":["互联网","游戏"],"company":"公司10","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"11","tags":["互联网","游戏"],"company":"公司11","description":"六险一金，弹性上下班"},
        {"position":"java工程师","publishTime":"2020-8-28 10:00","salary":"15~25k","experience":"3~5年","jobCode":"12","tags":["互联网","游戏"],"company":"公司12","description":"六险一金，弹性上下班"}
    
    ];
    let url = "/kafka/individual/";
    var app = new Vue({
        el: '#app',
        data: {
            positions: positions
        },
        methods: {
            sendLog: function(action, index, event) {
                alert(action + ' ' + index);
                param = {
                    'action': action,
                    'userId': 'lguser123',
                    'act_time': new Date().getTime(),
                    'job_code': positions[index]['jobCode']
                };
                console.log(param);
                axios.post(url, param).then((r) => alert('sucess'));
            }
        }
    });
</script>
</html>